<template>
  <div class="el-overlay" style="z-index: 3001">
    <div class="el-overlay-dialog">
      <div class="el-dialog" :class="{ 'is-fullscreen': isFullscreen }">
        <div class="el-dialog__header">
          <div class="el-dialog__title">
            <Icon class="preview-icon" :size="20" icon="mdi:video" />
            &nbsp;
            {{ url }}
          </div>
          <div class="el-dialog__headertool">
            <div class="el-dialog__btn" v-if="isFullscreen" @click="toggleFull">
              <Icon :size="20" icon="bx:exit-fullscreen" />
            </div>
            <div class="el-dialog__btn" v-else @click="toggleFull">
              <Icon :size="20" icon="bx:fullscreen" />
            </div>
            <div class="el-dialog__btn" @click="close">
              <Icon :size="20" icon="material-symbols:close" />
            </div>
          </div>
        </div>
        <div class="el-dialog__body">
          <RtspPlayer :url="url" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ElButton } from 'element-plus'
import { Icon } from '@/components/Icon'
import RtspPlayer from '@/components/RtspPlayer/index.vue'

export default {
  name: 'ContentEditor',
  components: { Icon, RtspPlayer },
  props: {
    url: String,
    fullscreen: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isFullscreen: false
    }
  },
  watch: {
    fullscreen: {
      handler(val) {
        this.isFullscreen = val
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    close() {
      this.$emit('close')
    },
    toggleFull() {
      this.isFullscreen = !this.isFullscreen
    }
  }
}
</script>

<style lang="less" scoped>
.el-dialog {
  display: flex;
  flex-direction: column;
  .el-dialog__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-dialog__title {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      padding-right: 20px;
      font-size: 14px;
      display: flex;
      align-items: center;
    }
    .el-dialog__headertool {
      display: flex;
    }
    .el-dialog__btn {
      line-height: 0;
      cursor: pointer;
      & + .el-dialog__btn {
        margin-left: 5px;
      }
    }
  }
  .el-dialog__body {
    padding: 0;
    overflow: auto;
    flex: 1;
    background-color: #000;
  }
  &.is-fullscreen {
    height: 100%;
  }
  video {
    max-height: 100%;
    width: 100%;
    object-fit: contain;
    overflow-clip-margin: content-box;
    overflow: clip;
  }
}
</style>
